/**
 * Created by coder on 2018/5/14.
 */
import React,{Component} from 'react'
import {Form,Icon,Input,Button} from 'antd'
import './WtLogin.css'
import {Link} from 'react-router-dom'

//util
import WtHostPost from '../util/WtHostPost'
import WtNotification from '../util/WtNotification'
import WtLogger from '../util/WtLogger'
import WtDefaultHandlePostError from '../util/WtDefaultHandlePostError'
import WtValidate from "../util/WtValidate"
import Particles from 'react-particles-js'

//const
const FormItem = Form.Item;

class WtForgotPasswordForm extends Component{
	handleSubmit = (e) => {
		e.preventDefault();
		this.props.form.validateFields((err, values) => {
			if (!err) {
				WtLogger.log('Received values of form: ', values);
				const {onFinish} = this.props;
				if(onFinish){
					onFinish(values);
				}
			}
		});
	};

	render(){
		const {getFieldDecorator} = this.props.form;

		return (
			<Form onSubmit={this.handleSubmit} className="login-form">
				<FormItem>
					{getFieldDecorator('email', {
						rules: [
                            { required: true, message:'请输入用户邮箱'},
                            { validator: WtValidate.validateEmail }
						],
					})(
						<Input prefix={<Icon type="mail" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="邮箱" />
					)}
				</FormItem>
				<FormItem>
					<Button loading={this.props.submitting} type="primary" htmlType="submit" className="login-form-button">提交</Button>
					<div style={{textAlign:'center'}}>
						<Link to="/login">-- 现在去登录 --</Link>
					</div>
				</FormItem>
			</Form>
		);
	}
}

const WtForgotPasswordFormWrapper = Form.create()(WtForgotPasswordForm);

class WtForgotPassword extends Component{
	constructor(props){
		super(props);
		this.state = {
			submitting:false,
		};
	}


	onFinish = (values) => {
		this.setState({submitting:true});
		WtHostPost('/forgot-password',{
			email:values.email,
		}).then(({json,header}) => {
			if(json.code === 0){
				WtNotification.success('忘记密码请求已经提交成功，请查收您的邮件，如果未收到邮件，请在检查垃圾邮件');
			} else {
				throw json;
			}
            this.setState({submitting:false});
		}).catch(error => {
			WtNotification.error(error.msg);
            this.setState({submitting:false});
		});
	};

	render(){
		return (
			<div id={"login"}>
				<Particles
					params={{
						particles: {
							number : {
								value : 100
							},
							line_linked: {
								shadow: {
									enable: true,
									color: "#FFFFFF",
									blur: 2
								}
							}
						}
					}}
					style={{
						height : '%100',
						background : 'rgb(19,19,41)',
					}}
					height={"950px"}
				/>


					<div className="wt-login">
						<div className="nav-logo" onClick={() => this.props.history.push('/')}/>
						<h3 className="title">忘记密码</h3>
						<WtForgotPasswordFormWrapper
							onFinish={this.onFinish}
							submitting={this.state.submitting}
						/>
					</div>
			</div>

		);
	}
}

export default WtForgotPassword;